<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<slot-named>
				<div slot="header">title</div>
				<div>main内容</div>
				<div></div>
				<div slot="footer">footer</div>
			</slot-named>
			
			<slot-named>
				<!-- template标签不会真正渲染到html页面中，只有两个p标签 -->
<!--				<template slot="header">-->
				<template v-slot="header">
<!--				简写-->
<!--				<template #header>-->
					<p>title1</p>
					<p>title2</p>
				</template>
				<div>main内容</div>
				<div>内容</div>
				<template slot="footer">footer</template>
			</slot-named>
		</div>
		<script src="js/vue-2.5.16.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component("slot-named",{
				template:`
				<div class="container">
				  <header>
				    <slot name="header"></slot>
				  </header>
				  <main>
				    <slot>默认main</slot>
				  </main>
				  <footer>
				    <slot name="footer"></slot>
				  </footer>
				</div>
				`
			});
			var vm = new Vue({
				el:"#app",
				data:{}
			})
		</script>
	</body>
</html>
